import { defineStore } from "pinia";

export const useUiStore = defineStore("ui", {
  state: () => ({
    isDark: false,
    bigLogo: "logo/sage_font_white.png",
    logoInBlack: "logo/sage_font_black.png",
    logoInWhite: "logo/sage_font_white.png",
    headerClass: "text-white bg-black",
    modelClass: "text-white bg-half-black",
    cardClass: "text-white bg-grey-9",
    btnClass: "text-white bg-indigo text-space text-bold",
    itemClass: "text-white bg-grey-blue",
    activeClass: "text-white bg-light-blue-6",
    language: "zh-CN", // 语言
    brand: {
      accent: "#9C27B0",
      primary: "#027BE3",
      secondary: "#26A69A",
      dark: "#1d1d1d",
      "grey-blue": "#455781",
      positive: "#21BA45",
      negative: "#C10015",
      info: "#31CCEC",
      warning: "#F2C037",
    },
  }),
  getters: {},
  actions: {
    // 切入黑暗模式
    DarkIn() {
      this.isDark = true;
      this.bigLogo = this.logoInWhite;
      this.headerClass = "text-white bg-black";
      this.modelClass = "text-white bg-half-black";
      this.cardClass = "text-white bg-grey-9";
    },
    // 切出黑暗模式
    DarkOut() {
      this.isDark = false;
      this.bigLogo = this.logoInBlack;
      this.headerClass = "text-black bg-white";
      this.modelClass = "text-black bg-half-white";
      this.cardClass = "text-black bg-white";
    },
    // 切换语言显示
    changeLanguage(val) {
      this.language = val;
    },
  },
  // 开启数据缓存
  persist: {
    enabled: true,
    strategies: [
      {
        key: "ui",
        storage: localStorage,
        paths: [
          "isDark",
          "bigLogo",
          "headerClass",
          "modelClass",
          "cardClass",
          "btnClass",
          "itemClass",
          "activeClass",
          "brand",
          "language",
        ],
      },
    ],
  },
});
